html,
body {
  height: 100%;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Microsoft YaHei"
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

/* header start */
#header {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  height: 50px;

  .brand-container {
    display: flex;
    overflow: hidden;
    align-items: center;
    width: 230px;
    height: 100%;
    transition: width .5s ease-in-out;
    white-space: nowrap;
    word-break: break-all;
    background-color: @brand-bgcolor;

    .navbar-brand {
      overflow: hidden;
      color: @brand-color;

      .title {
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
        white-space: nowrap;
        word-break: break-all;
        font-size: @font-size-large;
      }
    }
  }

  .navbar-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
    border-left: 1px solid @brand-border-color;
    background-color: @color-back;
    box-shadow: 0 1px 4px @box-shadow-color;

    #mainMenuToggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      cursor: pointer;
      color: @link-color;

      .icon {
        font-size: 21px;
      }

      .icon-bars {
        display: none;
      }

      .icon-times {
        display: inline-block;
      }

      &:hover {
        background-color: @link-hover-bgcolor;
      }
    }
  }
}

/* header end */

/* navbar-nav start */
.navbar-nav {
  display: flex;
  align-items: center;
  margin-top: 3px;
  margin-right: 20px;

  #search {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    margin-right: 10px;

    .icon-search-container {
      position: absolute;
      background-color: @color-secondary;
      left: 0;
      top: 0;
      width: 38px;
      height: 32px;
      color: #fff;
      border-radius: 20px 0 0 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  #searchInput {
    padding-left: 40px;
    color: #666;
    border: 1px solid @color-secondary;
    border-radius: 20px;
    width: 200px;
    transition: width 0.5s ease-in-out;
  }

  #searchInput::placeholder {
    color: #8d8d8d;
  }

  #searchInput:focus {
    width: 240px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(51, 51, 51, .275);
  }

  .has-avatar {
    float: left;

    >a {
      color: @link-color;

      &:hover {
        background-color: @link-hover-bgcolor;
      }
    }

    .notice {
      position: absolute;
      margin-top: -4px;
      margin-left: -4px;
    }
  }

  .icon {
    font-size: 21px;
  }
}

/* navbar-nav end */

.modal {
  .modal-body {
    display: flex;
    justify-content: space-around;

    .basic {
      flex-basis: 20%;
      padding-top: 30px;

      .uploader-files{
        display: none;
      }

      .desc {
        margin-bottom: 8px;
        font-size: 12px;
        text-align: left;
      }
    }

    .detail {
      flex-basis: 30%;

      .has-label-left {
        margin-bottom: 10px;
      }
    }

    .password-edit {
      flex-basis: 30%;

      .has-label-left {
        margin-bottom: 10px;

        .input-control-label-left {
          width: 80px;
        }

        .form-control {
          padding-left: 80px;
        }
      }
    }
  }
}

/* side start */
#side {
  position: fixed;
  z-index: 1;
  top: 50px;
  bottom: 36px;
  left: 0;
  overflow: hidden;
  width: 230px;
  transition: width .5s ease-in-out;

  >.menu-main {
    position: absolute;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    background-color: @sidebar-bgcolor;

    &::-webkit-scrollbar {
      display: none;
    }

    >.tree-menu {
      width: 230px;
      border: none;
      border-radius: 0;

      li.active {
        >a {
          background-color: #2b373d;
          color: @nav-item-native-color;
        }
      }

      li {
        a {
          border: none;
          color: @nav-item-color;

          &:hover {
            background-color: #2b373d;
          }
        }
      }
    }
  }
}

/* side end */

/* main start */
#main {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 230px;
  padding: 0 10px 46px 10px;
  transition: left .5s ease-in-out;
  background-color: @main-bgcolor;
}

#tabs-container {
  min-height: 100%;

  .tabs-navbar {
    position: absolute;
    top: -40px;
    left: 40px;
    right: 380px;

    .tabs-nav {
      height: auto;
      border-bottom: none;

      .tab-nav-item {
        .tab-nav-link {
          display: flex;
          border: none;
          height: 36px;
          padding: 8px;
          align-items: center;
          color: #777;
          background-color: #e4e4e4;
          > .icon {
            position: static;
          }

          > .title {
            max-width: 100px;
            position: static;
            padding-left: 4px;
          }

          > .close {
            top: 8px;
          }
        }
      }

      .tab-nav-item.active {
        .tab-nav-link {
          color: #333;
          background-color: #d0d0d0;
        }
      }
    }
  }

  .tabs-container {
    top: 10px;
  }
}

/* main end */

/* footer start */
#footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #fff;

  .breadcrumb {
    margin-bottom: 0;

    li:not(:first-child) {
      &::before {
        content: '>';
      }
    }
  }
}
/* footer end */
